<template>
  <div class="login" v-fullheight>
    <div class="header">
      <img src="~@/assets/images/logo.png" class="logo" alt="" />
      <div class="name">全过程工程咨询服务云平台</div>
    </div>
    <div class="content">
      <div class="taps-div">
        <div class="taps-items">
          <span :class="loginType === 0 ? 'active' : ''" @click="changeTab(0)">账号</span>
          <span :class="loginType === 1 ? 'active' : ''" @click="changeTab(1)">手机</span>
        </div>
        <div class="active-line" :class="loginType === 0 ? 'one' : 'two'"></div>
      </div>

      <div class="login-div">
        <div class="username-login" v-show="loginType === 0">
          <div class="field-div username">
            <span class="iconfont iconzhanghao"></span>
            <van-field v-model="username" placeholder="请输入账号" clearable @focus="focus"></van-field>
          </div>
          <div class="field-div password">
            <span class="iconfont iconmima"></span>
            <van-field v-model="password" :type="plaintext ? '' : 'password'" placeholder="请输入密码" @click-right-icon="plaintext = !plaintext" @focus="focus" clearable>
              <template #right-icon>
                <span class="iconfont" :class="{ iconxianshi: plaintext, iconbiyan: !plaintext }"></span>
              </template>
            </van-field>
          </div>
        </div>

        <div class="mobile-login" v-show="loginType === 1">
          <div class="field-div username">
            <span class="iconfont iconzhanghao"></span>
            <van-field v-model="mobile" type="digit" placeholder="请输入手机号" clearable @focus="focus"></van-field>
          </div>
          <div class="field-div password">
            <span class="iconfont iconmima"></span>
            <van-field v-model="code" placeholder="请输入验证码" type="digit" maxlength="6" clearable @focus="focus">
              <template #button>
                <van-button size="small" type="primary" @click="getSms" v-show="!counting">获取验证码</van-button>
                <div class="countdown" v-show="counting">重新获取(<van-count-down ref="countDown" :time="60000" @finish="countDownFinish" :auto-start="false" format="ss" />)S</div>
              </template>
            </van-field>
          </div>
        </div>

        <div class="error">{{ errmsg }}</div>
      </div>

      <div class="login-btn-div">
        <van-loading v-show="isLoading" />
        <div v-show="!isLoading" class="login-btn" @click="login"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import Copyright from "@/components/Copyright.vue";
import { Field, Button, Loading, CountDown, NumberKeyboard } from "vant";
import CLogin from "./Login";
import Api from "@/api/index";

@Component({
  name: "Login",
  components: {
    Copyright,
    VanField: Field,
    VanButton: Button,
    VanLoading: Loading,
    VanCountDown: CountDown,
    VanNumberKeyboard: NumberKeyboard
  }
})
export default class Login extends CLogin {
  private show = false;
  /**
   * loginType=0: 账号密码登陆
   * loginType=1: 手机验证码登陆
   */
  private loginType = 0;

  // 密码是否明文显示，默认否
  private plaintext = false;

  public isLoading = false;

  // 验证码倒计时是否正在执行
  private counting = false;

  // 验证码是否发送过
  private sended = false;

  // 调用发送验证码后，服务端返回的uuid
  private uuid = "";
  // 账号
  private username = "";

  // 密码
  private password = "";

  // 手机号
  private mobile = "";

  // 验证码
  private code = "";

  mounted() {
    const fullHeight = document.getElementById("full-height");
    if (fullHeight) {
      console.log(fullHeight.offsetTop);
    }
  }

  created() {
    this.Clear();
  }

  private focus() {
    this.errmsg = "";
  }

  private changeTab(type: number) {
    this.loginType = type;
    this.username = "";
    this.password = "";
    this.mobile = "";
    this.code = "";
    this.errmsg = "";
  }

  /**
   * 发送验证码
   */
  private async getSms() {
    if (!this.mobile || !this.$tools.checkPhone(this.mobile)) {
      this.errmsg = "请输入正确的手机号码";
      return;
    }

    const res = await Api.LoginCaptchaSMS(this.mobile);
    if (res.code === 200) {
      this.uuid = res.uuid;

      // 开始倒计时
      this.sended = true;
      this.counting = true;
      (this.$refs.countDown as any).start();
    } else {
      this.errmsg = res.msg;
    }
  }

  /**
   * 验证码倒计时结束事件
   */
  private countDownFinish() {
    this.counting = false;
    (this.$refs.countDown as any).reset();
  }

  /**
   * 账号密码登陆
   */
  private async usernameLogin() {
    if (!this.username) {
      this.errmsg = "请输入账号";
      return;
    }
    if (!this.password) {
      this.errmsg = "请输入密码";
      return;
    }
    return await super.UsernameLogin({ username: this.username, password: this.password });
  }

  /**
   * 手机号登陆
   */
  private async mobileLogin() {
    if (!this.mobile || !this.$tools.checkPhone(this.mobile)) {
      this.errmsg = "请输入正确的手机号码";
      return;
    }
    if (!this.sended) {
      this.errmsg = "请先发送验证码";
      return;
    }
    if (this.sended && !this.code) {
      this.errmsg = "请输入验证码";
      return;
    }

    return await super.MobileLogin({ phonenumber: this.mobile, code: this.code, uuid: this.uuid });
  }

  private async login() {
    if (this.isLoading) {
      return;
    }

    this.isLoading = true;
    this.errmsg = "";

    let res: any;
    if (this.loginType === 0) {
      res = await this.usernameLogin();
    } else {
      res = await this.mobileLogin();
    }

    setTimeout(() => {
      this.isLoading = false;

      if (res && res.code === 200) {
        this.$router.push({ name: "Home" });

        // 登陆回跳预留代码
        // const _uri = decodeURIComponent((this.$route.query.return ? this.$route.query.return : "") as string);
        // if (_uri) {
        //   if (_uri.indexOf("http://") > -1) {
        //     location.replace(_uri);
        //   } else {
        //     this.$router.push({ path: _uri.toString() });
        //   }
        // } else {
        //   this.$router.push({ name: "Home" });
        // }
      }
    }, 400);
  }
}
</script>

<style lang="less" scoped>
.login {
  background: white;
  .header {
    text-align: center;
    height: 187px;
    background: url("~@/assets/images/login-header.png") center bottom no-repeat;
    background-size: cover;
    overflow: hidden;
  }
  .content {
    padding: 0 22px;
  }

  .logo {
    margin: 0 auto;
    margin-top: 20px;
    height: 52px;
    width: 52px;
  }

  .name {
    font-size: 15px;
    color: white;
    margin-top: 6px;
  }

  .taps-div {
    margin-top: 48px;
    position: relative;
    display: inline-block;
  }

  .active-line {
    width: 48px;
    height: 7px;
    background: linear-gradient(249deg, rgba(219, 233, 255, 0) 0%, #7ba8ff 86%);
    position: absolute;
    bottom: 2px;
    transition-duration: 300ms;

    &.one {
      left: -2px;
    }

    &.two {
      left: 66px;
    }
  }

  .taps-items {
    position: relative;
    z-index: 1;
    display: flex;
    font-size: 22px;
    color: #bfc5cf;
    font-weight: 500;
    .active {
      color: #283d6a;
    }

    span:last-child {
      margin-left: 23px;
    }
  }

  .login-div {
    margin-top: 44px;
  }

  .password {
    margin-top: 17px;
  }

  .field-div {
    display: flex;
    align-items: center;
    height: 39px;
    background: rgba(132, 144, 163, 0.07);
    border-radius: 4px;
    & > .iconfont {
      font-size: 16px;
      color: #60a3fb;
      padding: 11px;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        height: 14px;
        border-right: 1px solid #e5e9ed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .van-cell {
      background: transparent;
      padding-left: 10px;
      padding-right: 5px;
      line-height: 0px;

      .van-button--small {
        width: 88px;
        height: 29px;
        background: #65b0fb;
        border-radius: 4px;
        border: 0;
      }

      /deep/.van-field__control {
        color: #283d6a;
      }
    }
    /deep/.van-field__right-icon,
    /deep/.van-icon-clear {
      padding-right: 16px;
    }
  }

  .login-btn-div {
    margin: 0 auto;
    width: 39px;
    height: 39px;
    margin-top: 30px;
    .login-btn {
      background: url("~@/assets/images/login-btn.png") no-repeat center;
      background-size: 100%;
      width: 100%;
      height: 100%;
      &:active {
        opacity: 0.8;
      }
    }
  }
  .iconxianshi {
    color: #91a1bc;
  }

  .error {
    color: #d5001c;
    margin-top: 10px;
    text-align: center;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
  }

  .countdown {
    font-size: 12px;
    color: #a6afc0;
    padding-right: 5px;
    display: flex;
    line-height: 180% !important;
    .van-count-down {
      color: #a6afc0;
    }
  }
}
</style>
